<template>
  <div class="r-t-3x">
    <el-dialog
    title="提示"
    :visible.sync="dialogVisibleFn.visible"
    width="30%"
    :modal="true"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    custom-class="r-3x">
        <span class="text-base">{{message}}</span>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" v-on:click="visible()">确 定</el-button>
        </span>
    </el-dialog>
  </div>
    
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      visible() {
        this.$store.state.app.dialogFlag = !this.$store.state.app.dialogFlag;
      }
    },
    computed:{
      dialogVisibleFn() {
        this.dialogVisible = !this.$store.state.app.dialogFlag;
        return this.$store.state.app.dialogFlag;
      },
      message() {
        return this.$store.state.app.dialogFlag.message;
      }
    }
  };
</script>

<style>
  .r-3x .el-dialog__header{
    background-color: #23b7e5;
    border-radius: 6px 6px 0 0;
    padding: 15px 20px 15px;
  }
  .el-dialog__header .el-dialog__title{
    color: #fff
  }
  .el-dialog__header .el-dialog__headerbtn{
    background: #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    top: 15px;
  }
</style>
